<template>
  <div class="card card-padding">
      <div class="title2 title2-padding">遥测量</div>
    <div class="btn-flex">
      <el-button class="pry-btn" @click="handleWatch()">遥测观察</el-button>
      <el-button class="pry-btn" @click="watchChart()">遥测折线</el-button>
      <el-button class="pry-btn" @click="watchMultiChart()">遥测复合折线</el-button>
    </div>
    <div class="custom-scrollbar" :style="{ maxHeight: autoHeight }">
      <el-tree
         ref="treeRef"
         class="tel-tree"
         :data="tmList"
         :props="props"
         :expand-on-click-node="false"
         :default-expand-all="false"
         :show-checkbox="true"
         node-key="name">
        <template #default="{ node, data }">
          <span>{{ data.name }} {{ data.description || '' }}</span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { fetchAllTmList } from '@/api/loads-api.js'
import {ElMessage, ElTree} from "element-plus"
import { useAutoHeightMixin } from "@/mixins/AutoHeightMixin.js"

export default {
  name: "TelemetryList",
  components: {ElTree},
  data() {
    return {
      tmList: [],
      props: {
        id: 'seq',
        label: (v) => { return `${v['name']} ${v['description'] || ''}` },
        children: 'children'
      },
      autoHeight: '500px'
    }
  },
  created() {
    this.autoHeight = `${ Math.ceil(window.innerHeight * 0.55) }` + 'px'
  },
  mounted() {
    this.fetchTelemetry();
  },
  methods: {
    fetchTelemetry() {
      fetchAllTmList({}, response => {
        const resData = response.data;
        const allTms = resData?.excel?.sheets || {}
        for (let tmItem of allTms) {
          this.tmList.push({
            name: tmItem['name'],
            children: tmItem['rows']
          })
        }
      }, error => {
        console.log(error);
      })
    },
    handleWatch() {
      const treeRef = this.$refs.treeRef;
      const currentUrl = window.location.href;
      let newUrl = currentUrl.replace('upair/index', 'satellite_loads')
      const seqs = treeRef.getCheckedKeys()
      if (seqs.length === 0) {
        ElMessage({
          message: '请选中至少一条遥测量',
          type: 'warning',
        })
      } else if (seqs.length > 300) {
        ElMessage({
          message: '您最多只能选择200条遥测量',
          type: 'warning',
        })
      } else {
        if (seqs[0] === '') {
          seqs.splice(0, 1)
        }
        window.open(newUrl + '?seq=' + seqs.join(","), "_blank");
      }
    },
    watchChart() {
      const treeRef = this.$refs.treeRef;
      const currentUrl = window.location.href;
      let newUrl = currentUrl.replace('upair/index', 'tm_charts')
      const seqs = treeRef.getCheckedKeys()
      if (seqs.length === 0) {
        ElMessage({
          message: '请选中至少一条遥测量',
          type: 'warning',
        })
      } else if (seqs.length > 6) {
        ElMessage({
          message: '您最多只能选择6条遥测量',
          type: 'warning',
        })
      } else {
        if (seqs[0] === '') {
          seqs.splice(0, 1)
        }
        window.open(newUrl + '?seq=' + seqs.join(","), "_blank");
      }
    },
    watchMultiChart() {
      const treeRef = this.$refs.treeRef;
      const currentUrl = window.location.href;
      let newUrl = currentUrl.replace('upair/index', 'tm_multi_charts')
      const seqs = treeRef.getCheckedKeys()
      if (seqs.length === 0) {
        ElMessage({
          message: '请选中至少一条遥测量',
          type: 'warning',
        })
      } else if (seqs.length > 6) {
        ElMessage({
          message: '您最多只能选择6条遥测量',
          type: 'warning',
        })
      } else {
        if (seqs[0] === '') {
          seqs.splice(0, 1)
        }
        window.open(newUrl + '?seq=' + seqs.join(","), "_blank");
      }
    }
  }
}
</script>

<style scoped>
.custom-scrollbar {
  overflow-y: auto;
}
</style>